<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="cc.css">
    <title>Document</title>
</head>
<body>
    <div id="app" class="wrapper-first">
        <section>
            <!-- 横幅广告部分-->
				<div class="banner">
					<div class="banner-lunbo">
						<img class="lunbo-img" v-for="item in imgList" :key="item.id" :src="item.src"
						@mouseover="changeInterval(true)" 
         @mouseleave="changeInterval(false)"  alt="暂无图片" 
         v-show="item.id === currentIndex" style="display: block;">
					</div>
				</div>
        </section>
    </div>
</body>
<script>
export default {
        data(){
            return {
				currentIndex: 0,
				timer: null,
				imgList:[{id:0,src:"lunbo1.jpg"},{id:1,src:"lunbo2.jpg"},{id:2,src:"lunbo3.jpg"},{id:3,src:"lunbo4.jpg"},{id:4,src:"lunbo5.jpg"}]
            }
        },
        methods:{
			//开启定时器
			startInterval(){
				clearInterval(this.timer);
				if(!this.timer){
					this.timer = setInterval(()=>{
						this.currentIndex++;
						console.log(this.currentIndex);
						if(this.currentIndex > this.imgList.length-1){
							this.currentIndex = 0;
						}
					},3000);
			}
			},
			changeInterval(val){
				if(val){
					clearInterval(this.timer)
				}else{
					this.startInterval()
				}
			},
			showGoods(index) {
      this.liList[index].showGoods = true;
    },
    hideGoods(index) {
      this.liList[index].showGoods = false;
    },
    goToGoodsPage(product) {
      location.href = 'goods.html'; // 这里可以根据产品跳转逻辑进行修改
    }
        },
		mounted(){
			this.startInterval()
		},
    }
</script>
</html>